import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import MainLayout from '@/layouts/MainLayout.vue'
import HomePage from '@/views/home/HomePage.vue'
import SplashPage from '@/views/splash/SplashPage.vue'
import LoginPage from '@/views/login/LoginPage.vue'
import RegisterPage from '@/views/login/RegisterPage.vue'
import ForgotPasswordPage from '@/views/login/ForgotPasswordPage.vue'
import HospitalListPage from '@/views/hospital/HospitalListPage.vue'
import HospitalDetailPage from '@/views/hospital/HospitalDetailPage.vue'
import DepartmentListPage from '@/views/hospital/DepartmentListPage.vue'
import DepartmentDetailPage from '@/views/hospital/DepartmentDetailPage.vue'
import DoctorListPage from '@/views/hospital/DoctorListPage.vue'
import DoctorDetailPage from '@/views/hospital/DoctorDetailPage.vue'
import BookingPage from '@/views/appointment/BookingPage.vue'
import AppointmentListPage from '@/views/appointment/AppointmentListPage.vue'
import VaccinationPage from '@/views/vaccination/VaccinationPage.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Splash',
    component: SplashPage
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginPage
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterPage
  },
  {
    path: '/forgot-password',
    name: 'ForgotPassword',
    component: ForgotPasswordPage
  },
  {
    path: '/',
    component: MainLayout,
    children: [
      {
        path: '/home',
        name: 'Home',
        component: HomePage,
        meta: { keepAlive: true }
      },
      {
        path: '/hospitals',
        name: 'Hospitals',
        component: HospitalListPage,
        meta: { keepAlive: true }
      },
      {
        path: '/hospital/:id',
        name: 'HospitalDetail',
        component: HospitalDetailPage
      },
      {
        path: '/hospital/:id/detail',
        redirect: '/hospital/:id'
      },
      {
        path: '/hospital/:id/departments',
        name: 'DepartmentList',
        component: DepartmentListPage
      },
      {
        path: '/hospital/:id/department/:deptId',
        name: 'DepartmentDetail',
        component: DepartmentDetailPage
      },
      {
        path: '/hospital/:id/doctors',
        name: 'DoctorList',
        component: DoctorListPage
      },
      {
        path: '/hospital/:id/doctor/:doctorId',
        name: 'DoctorDetail',
        component: DoctorDetailPage
      },
      {
        path: '/hospital/:id/booking',
        name: 'Booking',
        component: BookingPage
      },
      {
        path: '/appointments',
        name: 'Appointments',
        component: AppointmentListPage,
        meta: { keepAlive: true }
      },
      {
        path: '/departments',
        name: 'AllDepartments',
        component: DepartmentListPage,
        props: { isGlobal: true }
      },
      {
        path: '/doctors',
        name: 'AllDoctors',
        component: DoctorListPage,
        props: { isGlobal: true }
      },
      {
        path: '/department/:deptName',
        name: 'DepartmentByName',
        component: DepartmentDetailPage,
        props: route => ({ deptName: route.params.deptName })
      },
      {
        path: '/profile',
        name: 'Profile',
        component: () => import('@/views/profile/ProfilePage.vue')
      },
      {
        path: '/profile/patients/add',
        name: 'AddPatient',
        component: () => import('@/views/profile/AddPatientPage.vue')
      },
      {
        path: '/vaccination',
        name: 'Vaccination',
        component: VaccinationPage
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router 